<style src="@/css/components/button.css"></style>
<style>
.study-plan {
    background: #fff;
    padding: 56px 200px 30px;
}

.study-plan  .el-dialog__header span {
    font-size: 14px;
    color: #7485B1;
    margin-left: 8px;
}

.study-plan-process ul {
     display:flex;
    counter-reset:sectioncounter;
    margin-bottom: 60px;
}

.study-plan-process ul li {
    display:flex;
    align-items: center;
    position: relative;
    width:30%;
    flex-direction: row;
    color:#3A3A63;
}


.study-plan-process ul li.active::before {
    background-color:rgba(53,119,251,1);
    border:1px solid rgba(53,119,251,1);
    color:#fff;
}

.study-plan-process ul li:last-child {
    width:10%;
}


.study-plan-process ul li::before {
    content:counter(sectioncounter);
    width:32px;
    height: 32px;
    flex:32px 0 0;
    border:1px solid rgba(193,198,212,1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    counter-increment:sectioncounter;
    margin:0 10px;
}


.study-plan-process ul li:last-child .plan-list-cont::after {
    display: none;
}

.study-plan-process .plan-list-cont {
    display: flex;
    width:100%;
    align-items: center;
}

.study-plan-process .plan-list-cont span{
    display: flex;
    background-color:#fff;
    white-space:nowrap;
    padding-right:20px;
}

.study-plan-process .plan-list-cont::after {
    content:" ";
    display: inline-block;
    width:100%;
    height: 1px;
    box-sizing: border-box;
    background-color: #E1E7EB;
}

.selectPersonnel {
    width:886px;
    margin: auto;
}

.plan-accomplish {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding:210px 0 280px;
}

.plan-accomplish > i {
    color:#58D092;
    font-size:69px;
   /* width:69px;
    height: 69px;
    border:5px solid #58D092;
    border-radius: 50%;
    text-align: center;
    line-height: 69px;*/
}

.plan-accomplish > p {
    color:#3A3A63;
    font-size:20px;
    padding:10px 0 60px;
}
</style>
<template>
    <div class="study-plan">
        <div class="study-plan-process">
            <ul>
                <li :class="{ 'active': curState == 0 }">
                    <div class="plan-list-cont">
                        <span>{{ !StudyID ? '创建学习计划' : '编辑学习计划'}}</span>
                    </div>
                </li>
                <li :class="{ 'active': curState == 1 }">
                    <div class="plan-list-cont">
                        <span>选择资源</span>
                    </div>
                </li>
                <li :class="{ 'active': curState == 2 }">
                    <div class="plan-list-cont">
                        <span>选择人员</span>
                    </div>
                </li>
                <li :class="{ 'active': curState == 3 }">
                    <div class="plan-list-cont">
                        <span>完成</span>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 第一步 -->
        <createStudy style="padding-left:50px;" :parameter="form" @setFrom="getFrom"  :StudyID="StudyID" v-show="curState == 0"></createStudy>
        <!-- 第二步 -->
        <selectResource  @prve = "prvePage" :studyID="StudyID" :comResIds="comResIds" :lockedState = "lockedState" @setComResiD="getComResiD" v-show="curState == 1"></selectResource>
        <!-- 第三步 -->
        <selectPersonnel  @prve = "prvePage"  :recordSelectId = "StudyMembersIDs" @setPersonnel="getPersonnel" class="selectPersonnel" v-show="curState == 2"></selectPersonnel>
        <!-- 第四步成功 -->
        <div class="plan-accomplish" v-if="curState == 3">
            <i class="icon iconfont"></i>
            <p>发布计划成功</p>
            <div class="btn-cont">
                <el-button v-if="state == 'create'" @click="prveState">再发一个</el-button>
                <el-button type="primary showdow" @click="router">查看计划</el-button>
            </div>
        </div>


        <!-- 弹窗区 -->
        <el-dialog
            title="提示"
            :visible.sync="popupState"
            class="new-dialog"
            width="480px"
            :before-close="handleClose">
            <div class="cont" style="text-align:center"><span v-for="item of getInsufficient">《{{ item.ResName}}》</span><br/>可分配资源不足，请补充后再创建计划</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary"  class="add" @click="popupState = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    import createStudy from "components/study-plan/create_study.vue"
    import selectResource from "components/study-plan/select_resource.vue"
    import selectPersonnel from "components/study-plan/select_personnel.vue"

    import qs from 'qs'

    export default {
        data() {
            return {
                path: [
                    {
                        'name':'培训学习',
                        'path':'/study/plan-list'
                    },
                    {
                        'name':'学习计划',
                        'path': '/study/plan-list'
                    },

                    {
                        'name': '创建学习计划'
                    }
                ],
                state:'create',
                curState:0,
                StudyID:'',
                form:{}, //计划表单
                resourceList:[], //存储选择的资源
                IsUnlocked:'', //当前学习状态（锁的状态)
                selectPersonnelId:[], //当前选择人员列表
                getInsufficient:[],
                popupState:false,
                StudyMembersIDs:'', //选择的人员
                lockedState:'', //获取编辑锁状态
                comResIds:[] //获取编辑资源id
            }
        },

        methods:{

            //第一步计划填入数据
            getFrom(value) {
                this.form = value
                this.curState ++
            },

            prveState() {
                location.pathname = "/study/next-plan"
            },

            //选择资源
            getComResiD(value) {
                if( value.ComResIDs.length <= 0) {
                    this.$message.error('请选择资源！')
                    return false
                }

                this.IsUnlocked = value.IsUnlocked
                this.resourceList = value.ComResIDs
                this.curState ++
            },

            //获取选择人员
            getPersonnel(value) {
                if( value.length <= 0) {
                    this.$message.error('请选择人员！')
                    return false
                }

                this.selectPersonnelId = value
                this.verify()
            },

            router() {
                this.$router.push('/study/plan-info?studyID='+ this.StudyID)
            },
            // 上一步
            prvePage() {
                this.curState --
                if( this.curState < 0) {
                    this.curState = 0
                }
            },

            verify() {
                let len = this.selectPersonnelId.length;

                this.getInsufficient =  this.resourceList.filter(item => item.Stocks < len)

                if( this.getInsufficient.length > 0 ) {
                    this.popupState = true
                } else {
                    !!this.StudyID ? this.editStudy() : this.addStudy()
                }
            },

            //添加计划
            async addStudy() {
                let param = {
                    title: this.form.Title,
                    abstract: this.form.Abstract,
                    isUnlocked: this.IsUnlocked,
                    comResIDs: this.resourceList.map( item => item.ComResID ).join(','),
                    employeeIDs: this.selectPersonnelId.join(','),
                    startTime: this.form.StartTime,
                    finishTime: this.form.FinishTime,
                    remark: this.form.Remark
                }

                const {data} = await axios.post('/com/study/addStudy', qs.stringify(param))

                if (data.flag === 1) {
                    this.StudyID = data.data.StudyID
                    this.curState ++
                }
            },

            // 编辑学习计划
            async editStudy() {
                let param = {
                    studyID: this.StudyID,
                    title: this.form.Title,
                    abstract: this.form.Abstract,
                    isUnlocked: this.IsUnlocked,
                    comResIDs: this.resourceList.map( item => item.ComResID ).join(','),
                    employeeIDs: this.selectPersonnelId.join(','),
                    startTime: this.form.StartTime,
                    finishTime: this.form.FinishTime,
                    remark: this.form.Remark
                }

                const {data} = await axios.post('/com/study/editStudy', qs.stringify(param))

                if (data.flag === 1) {
                    this.curState ++
                }

            },

            // 编辑获取详情
            async studyInfo() {
                const { data } = await axios.post('/com/study/studyInfo', qs.stringify({'studyID': this.StudyID}))

                if(data.flag == 1){
                    let idata = data.data
                    this.form = {
                        Title: idata.Title,
                        Abstract: idata.Abstract,
                        Remark: idata.Remark,
                        StartTime: idata.StartTime,
                        FinishTime:idata.FinishTime
                    }

                    this.comResIds = idata.ComResIDs
                    this.lockedState = idata.IsUnlocked
                    this.StudyMembersIDs = idata.StudyMembersIDs

                } else {
                    this.$message.error(data.msg)
                }
            },
         },



        components: {
            createStudy,
            selectResource,
            selectPersonnel
        },

        created() {
            if( !!this.$route.query.studyID ) {
                this.state = 'edit'
                this.StudyID = this.$route.query.studyID
                this.studyInfo()
                this.path[this.path.length-1].name = "编辑学习计划"
            }

            this.$store.commit('setPath', this.path)

        }
    }
</script>
